<template>
    <view class="container">
		<view class="product-info">
			<image :src="info.image.file_path" style="width: 112rpx;height: 112rpx;"></image>
			<view class="title">{{info.product_name}}</view>
			<view class="">核销码：{{info.verify_code}}</view>
		</view>
        <view class="traveler-info">
			<view class="title edit-info">
				<view>出行人信息</view>
				<view class="edit-btn" @click="editInfo()">修改</view>
			</view>
			<view class="value">姓名：{{info.name}}</view>
			<view class="value">手机号：{{info.mobile}}</view>
			<view class="value">身份证号：{{info.id_card}}</view>
		</view>
		<view class="confirm-btn" @click="confirm()">确认核销</view>
		<view class="cancel-btn" @click="cancel()">取消</view>
		
		<u-popup mode="bottom" closeable="true" border-radius="30" v-model="addTraveler">
			<view class="add-traveler">
				<view>修改出行人信息</view>
				<view class="info-block name-block">
					<view class="title">姓名</view>
					<u-input v-model="info.name" type="text" placeholder="请输入姓名" />
				</view>
				<view class="info-block phone-block">
					<view class="title">手机号</view>
					<u-input v-model="info.mobile" type="text" placeholder="请输入手机号" />
				</view>
				<view class="info-block idcard-block">
					<view class="title">身份证号</view>
					<u-input v-model="info.id_card" type="text" placeholder="请输入身份证号" />
				</view>
			</view>
			<view class="add" @click="add()">保存</view>
		</u-popup>
    </view>
</template>

<script>
    var _self;
    export default{
        computed: {
        },
        data() {
            return {
				verify_code: '',
				info: {},
				addTraveler: false,
				timer:''
            };
        },
        onShow() {
            _self.getdata()
        },
        async onLoad(options) {
            _self = this;
			_self.verify_code = options.verify_code;
        },
		beforeDestroy() {
			clearInterval(this.timer)
		},
        methods:{
            getdata(){
                let self = this;
                self._post(
                    'user.Order/getOrderVerifyInfo', {
                        verify_code: self.verify_code,
						product_type: 4
                    },
                    function(res) {
                        console.log(res)
                        _self.info = res.data;
                    }
                );
            },
			confirm() {
				let self = this;
				self._post(
				    'store.Order/setOrderVerify', {
				        verify_code: self.verify_code,
						type: 3
				    },
				    function(res) {
				        console.log(res)
						uni.showToast({
						    title: res.msg,
						    icon:'none',
							duration: 2000
						});
						
						self.timer = setInterval(function() {
							uni.switchTab({
								url: '/pages/index/member'
							})
						}, 2000)
				    }
				);
			},
			cancel() {
				uni.navigateBack();
			},
			editInfo() {
				this.addTraveler = true;
			},
			add() {
				let self = this;
				self._post(
				    'store.order/updateOrderTravelersInfo', {
				        opt_id: self.info.opt_id,
						name: self.info.name,
						mobile: self.info.mobile,
						id_card: self.info.id_card,
				    },
				    function(res) {
				        console.log(res)
				        uni.showToast({
				            title: res.msg,
				            icon:'none'
				        });
						self.addTraveler = false;
				    }
				);
			}
        },
    }
</script>

<style lang='scss'>
    page {
        background: #F2F2F2;
        padding-bottom: 160upx;
    }
	.product-info {
		text-align: center;
		color: #999999;
		font-size: 28rpx;
		image {
			margin: 120rpx auto 0;
		}
		.title {
			color: #1B1B1B;
			font-size: 28rpx;
			margin: 28rpx 0 16rpx;
		}
		.value {
			margin-bottom: 100rpx;
		}
	}
	.traveler-info {
		margin: 36rpx;
		border-bottom: 1rpx solid #C4C4C4;
		padding-bottom: 64rpx;
		.title {
			color: #1B1B1B;
			font-size: 32rpx;
			margin-bottom: 16rpx;
		}
		.value {
			color: #6E6E6E;
			font-size: 24rpx;
		}
	}
	.confirm-btn {
		width: 606rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: #F63E36;
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 64rpx auto 24rpx;
		text-align: center;
	}
	.cancel-btn {
		width: 606rpx;
		height: 96rpx;
		line-height: 96rpx;
		border: 2rpx solid #F63E36;
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #F63E36;
		text-align: center;
		margin: 0 auto;
	}
	.edit-info {
		display: flex;
		justify-content: space-between;
		.edit-btn {
			color: #F63E36;
			font-size: 28rpx;
		}
	}
	.add-traveler {
		padding: 32rpx 32rpx 156rpx;
		text-align: center;
		.name-block {
			margin-top: 40rpx;
		}
		.info-block {
			display: flex;
			align-items: center;
			height: 88rpx;
			.title {
				width: 200rpx;
				text-align: left;
			}
			u-input {
				width: 100%;
				border-bottom: 1rpx solid #D9D9D9;
			}
		}
	}
	.add {
		position: absolute;
		bottom: 16rpx;
		width: 690rpx;
		height: 80rpx;
		background: #F63E36;
		opacity: 1;
		border-radius: 56rpx;
		color: #ffffff;
		text-align: center;
		line-height: 80rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
</style>
